<template>
  <div>
    <div class="main_navigator fCenterY">
          <!-- <el-page-header @back="goBack" acontent="详情页面"></el-page-header> -->
      <div>
        <i class="el-icon-back"></i>
        <span class="navigator_span" @click="goBack">返回</span>
        &nbsp;&nbsp;
        <span style="color:#d4d4d4">|</span>
      </div>&nbsp;&nbsp;&nbsp;
      <el-breadcrumb aseparator=">" separator-class="el-icon-arrow-right" style="font-size:16px;">
        <!-- <el-breadcrumb-item><span @click="goBack" style="cursor:pointer;">返回</span>
        </el-breadcrumb-item>-->
        <el-breadcrumb-item>{{crumbOne}}</el-breadcrumb-item>
        <el-breadcrumb-item>
          <span :class="active_crumb">{{crumbTwo}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main_content">
      <div class="name">
        <el-row>
          <span>当前轮播图</span>
          <!-- <el-button type="primary" size="medium" @click="handleEdit()" style="float:right">编辑</el-button> -->
          <el-button type="primary" size="medium" @click="submitUpload" style="float:right">上传到服务器</el-button>
        </el-row>
        <myUpload
          :dad='$1'
          ref="upload"
          id="xxx"
          :style='{"max-height": Height - 250 + "px" }'
          style="width:100%;min-height:200px;adisplay:inline-block;white-space:normal;"
          temp='Next'
          readonly2
          multiple
          limit='12'
          url="http://47.104.23.200/yangzi/picture/uploadFile"
          :data="{file: '$file$', fileName: '$fileName$' }"
          myModel="myPic">
        </myUpload>
      </div>
    </div>
  </div>
</template>
<script>
import myhttp, {
  isEmpty,
  msgError,
  msgSuccess,
  msgWarning
} from "../../utils/myhttp";
import qs from "qs";
import api from "../../utils/api";
export default {
  data() {
    return {
      baseFileUrl: "http://47.104.23.200/yangzi/picture/uploadFile",
      dialogImageUrl: "",
      dialogVisible: false,
      tableData: [],
      imgData: [],
      fileList: [],
      active_crumb: "active_crumb", //面包屑当前颜色
      crumbOne: "轮播图管理",
      crumbTwo: "编辑",
    };
  },
  components: {},
  methods: {
    goBack() {
      // this.$router.go(-1);
      this.$router.push({name:'swiperManagement'});
    },
    submitUpload: function() {
      /* var list = this.myPic; //this.$refs.upload.uploadFiles;
      // console.log(list);
      var theUp = [];
      list.forEach((item, switch) => {
        if (item.response) {
          var aa = {
            pictureUrl: this.baseFileUrl + item.response.items,
            sort: switch + 1
          };
        } else {
          var aa = {
            pictureUrl: item.pictureUrl,
            sort: switch + 1
          };
        }
        theUp.push(aa);
      }); */
      // var postData = {
      //   pictureUrlList: JSON.stringify(theUp),
      //   userId: localStorage.getItem("userId")
      // };
      // const all = this.myPic;
      // if( all.length === 0 ) return $.msgWarning('请添加需要上传的图片！');
      // if( !all.find(i=>i.$file$) ) return $.msgWarning('没有需要上传的图片,全部都已上传！');
      this.$confirm.waitSuccess('确定要更新您的轮播图信息吗？','上传',{
        iconClass: 'el-icon-question',
        callback: a=>$return(a==='confirm' && 'success')
      })
      .success( ()=>this.Next(data=>$success(data)) )
      // this.Next.waitSuccess(data=>$success())
      .success(async data=>{
        // return console.error(data);
        var responseData = await $.post(api.addPicture, {
            pictureUrlList: mapArr(this.myPic,(v,i)=>(v && {sort: i+1, pictureUrl: v.pictureUrl}) ),
            userId: localStorage.getItem("userId")
        });
        if (responseData.result == "error") {
            msgError(this, responseData.msg);
        } else {
            msgSuccess(this, responseData.msg);
            this.getAllList();
        };
      });

    },
    handleRemove(file, fileList) {
      // if (this.imgData.length > 0) {
      //   var switch = 100000;
      //   this.imgData.forEach((item, indexTwo) => {
      //     if (item.pictureId == file.pictureId) {
      //       switch = indexTwo;
      //     }
      //   });
      //   if (switch != 100000) {
      //     this.imgData.splice(switch, 1);
      //   }
      // }
    },
    handlePictureCardPreview(file) {
      console.log(file);
      if (file.url) {
        this.dialogImageUrl = file.url;
      } else {
        this.dialogImageUrl = file.pictureUrl;
      }
      this.dialogVisible = true;
    },

    pictureChange() {},
    getAllList: async function() {
      var res = await $.post(api.getPictureByUserId, {
        userId: localStorage.getItem("userId")
      });
      res.success && ( this.myPic = res.items );
      /* this.tableData = responseData.items;
      if (responseData.result == "error") {
        msgError(this, responseData.msg);
      } else {
        if (this.tableData.length > 0) {
          this.tableData.forEach(item => {
            var aa = { url: item.pictureUrl, name: item.pictureId };
            this.imgData.push(aa);
          });
        }
      }
      console.log(this.imgData); */
    }
  },
  created() {
    this.getAllList();
  },
  mounted() {}
};
</script>
<style scoped>
.name {
  border: 1px solid #d4d4d4;
  /* text-align:center; */
}
.name > .el-row:first-child {
  padding: 10px 30px;
  border-bottom: 1px solid #d4d4d4;
}
.name > .el-row:first-child > span {
  line-height: 36px;
}
.name .el-row:last-child {
  padding: 60px 30px;
}

/* .el-col .grid-content {
    height: 210px;
    padding: 7px 5px;
    color: #2fa8ec;
    align-items: center;
    text-align: center;
    justify-content: center;
    background: red;
    width:100%;
  } */
.upload_img {
  padding: 30px 5px 50px 5px;
}
.active_crumb {
  color: rgb(90, 160, 230);
}
</style>


